﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>消息中心</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link href="/peopleList/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/peopleList/js/jquery-3.3.1.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>

</head>
<script>
    $(function () {
        $.get("/users/private",function (data) {
            var list = {list:data.sendUsers};//当前登录用户未读的信息
            var list1 = {list:data.otherUsers};//已关注用户的列表
            $("#listUser").renderValues(list,{
                getHref:function (item,value) {
                    $(item).prop("href","/mine/privateLetter.html?id="+value);
                    $(item).attr("data-did",value);
                }

            });
            var userId;
            $("#otherUser").renderValues(list1,{
                getHref:function (item,value) {
                    $(item).prop("href","/mine/privateLetter.html?id="+value);
                    $(item).attr("data-did",value);

                }
            });
            //给每个用户div绑定点击事件,点击去之后把所有未读信息标记为已读
            $("#total a").click(function () {
                userId  = $(".aui-flex.b-line.total").data("did");
                $.get("/privateMessages/privateTotals",{userId:userId},function (data) {
                })
            })
         })

    })
</script>
<body>


<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="/mine/message.html">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">好友列表</span>
        </div>
        <a href="/index.html" class="aui-navBar-item">
            首页
        </a>
    </header>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab id="total">
            <div class="tab-panel" id="listUser">
                <div class="tab-panel-item tab-active" render-loop="list">
                    <a render-key="list.send.id" render-fun="getHref"
                       class="aui-flex b-line total">
                        <span style="display: none" render-html="list.id"></span>
                        <div class="aui-look-img">
                            <img render-src="list.send.headImgUrl" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h3 render-html="list.send.nickName"></h3>
                            <p render-html="list.content" style="color: #732D2D">暂无消息</p>
                        </div>
                        <span class="badge badge-danger badge-pill" render-html="list.count"></span>
                    </a>
                </div>
            </div>
            <div class="tab-panel" id="otherUser">
                <div class="tab-panel-item tab-active" render-loop="list">
                    <a render-key="list.id" render-fun="getHref"
                       class="aui-flex b-line total">
                        <span style="display: none" render-html="list.id"></span>
                        <div class="aui-look-img">
                            <img render-src="list.headImgUrl" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h3 render-html="list.nickName"></h3>
                            <p>暂无消息</p>
                        </div>
                        <span class="badge badge-danger badge-pill" render-html="list.count"></span>
                    </a>
                </div>
            </div>
        </div>
    </section>
</section>

<script>
    $(function () {

    })
</script>
</body>
</html>
